---
title: "Link"
description: A navigational element that directs users to internal or external pages, optimized for accessibility and SEO.
order: 1
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Link.html#props"]
---

## Basic

A link allows users to navigate to another page or resource within a website or app.
<How toUse="navigation/link/link-demo" />

## Installation
To install the required package, run the following command:

```bash
npm i react-aria-components
```

<SourceCode toShow='link'/>

## Anatomy
```
import { Link } from "@/components/ui/link"

<Link href="#basic">Label</Link>
```

## Unstyled
By default, the link comes unstyled, making it easy to apply custom classes and styles.
<How toUse="navigation/link/link-unstyled-demo" />

## Use as Button
If you want to style a link to look like a button, you can do so by applying the `buttonStyles` prop.
<How toUse="navigation/link/link-button-demo" />

## Disabled
You can disable the link by setting the `isDisabled` prop.
<How toUse="navigation/link/link-disabled-demo" />
